<template>
    <view class="app-update">
        <view class="content-wrap">
            <view class="top-image-wrap"><image class="top-image" src="./image/top.png" mode="scaleToFill"></image></view>
            <view class="update-content-wrap">
                <view class="title-wrap">
                    <text class="update-title">{{ updateInfo.updateTitle }}</text>
                    <text class="update-version">v{{ updateInfo.versionOut }}</text>
                </view>
                <view class="text-wrap">
                    <text class="update-text">{{ updateInfo.updateContent }}</text>
                </view>
            </view>
            <view class="progress-wrap" v-if="downloading">
                <view class="progress-bar">
                    <text class="progress" :style="{ width: downloadProgress + '%' }">{{ downloadProgress }}%</text>
                </view>
            </view>
            <view class="update-button-wrap">
                <view class="wave-animation">
                    <view class="wave"></view>
                    <view class="wave"></view>
                    <view class="wave"></view>
                </view>
                <view class="update-button" @click="handleUpdate">立即更新</view>
            </view>
            <view class="close-button" v-if="showForcedUpdate" @click="handleCloseUpdate">Ⅹ</view>
        </view>
    </view>
</template>

<script>
import Update from '@/utils/update.js';
export default {
    data() {
        return {
            update: null, // 更新类实例
            updateInfo: {}
        };
    },
    onLoad(option) {
        this.handleInit(option);
    },
    methods: {
        // 初始化
        handleInit(option) {
            // 实例化更新类
            this.update = new Update({ isInit: true });
        },
        // 立即更新
        handleUpdate() {
            this.update && this.update.manualUpdate();
        },
        // 关闭更新
        handleCloseUpdate() {
            this.update && this.update.closeUpdate();
        }
    },
    computed: {
        showForcedUpdate() {
            return !this.update?.updateInfo?.forcedUpdate == 1;
        },
        downloadProgress() {
            return this.update?.downloadProgress;
        },
        downloading() {
            return this.update?.downloading;
        }
    },
    watch: {
        update: {
            handler(val) {
                if (val?.updateInfo) {
                    this.updateInfo = val.updateInfo;
                }
            },
            deep: true,
            immediate: true
        }
    },
    onBackPress() {
        if (this.update?.updateInfo?.forcedUpdate == 1) return true;
    }
};
</script>

<style scoped lang="scss">
.app-update {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.65);
    .content-wrap {
        width: 520rpx;
        position: relative;
        padding-top: 260rpx;
        border-radius: 20rpx;
        background-color: #fff;
        .top-image-wrap {
            top: -40rpx;
            left: 0;
            right: 0;
            width: 100%;
            height: 300rpx;
            position: absolute;
            .top-image {
                width: 100%;
                height: 300rpx;
            }
        }
        .update-content-wrap {
            display: flex;
            padding-bottom: 30rpx;
            flex-direction: column;
            .title-wrap {
                display: flex;
                padding: 10rpx 32rpx;
                align-items: flex-end;
                justify-content: space-between;
                .update-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-right: 30rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                }
                .update-version {
                    font-weight: bold;
                    flex-shrink: 0;
                }
            }
            .text-wrap {
                padding: 20rpx 0;
                max-height: 280rpx;
                overflow-y: scroll;
                padding-left: 32rpx;
                .update-text {
                    font-size: 28rpx;
                }
            }
        }
        .progress-wrap {
            padding: 0 20rpx;
            .progress-bar {
                width: 100%;
                height: 40rpx;
                overflow: hidden;
                border-radius: 20rpx;
                background-color: #e6e6e6;
                .progress {
                    width: 0;
                    color: #fff;
                    height: 40rpx;
                    display: flex;
                    font-size: 24rpx;
                    font-weight: bold;
                    align-items: center;
                    border-radius: 20rpx;
                    justify-content: center;
                    background-color: #4d85fd;
                    transition: width 0.1s ease;
                }
            }
        }
        .update-button-wrap {
            height: 200rpx;
            position: relative;
            border-radius: 20rpx;
            background-color: #6cc7e6;
            .update-button {
                top: 50%;
                left: 50%;
                width: 300rpx;
                height: 80rpx;
                color: #ffffff;
                display: flex;
                z-index: 99;
                font-weight: bold;
                position: absolute;
                align-items: center;
                border-radius: 8rpx;
                justify-content: center;
                background-color: #4d86fd;
                transform: translate(-50%, -20%);
            }
            .wave-animation {
                top: 0;
                left: 0;
                z-index: 9;
                width: 520rpx;
                height: 180rpx;
                overflow: hidden;
                position: absolute;
                background-color: #fff;
                .wave {
                    top: 50rpx;
                    left: -250rpx;
                    width: 1000rpx;
                    height: 1000rpx;
                    position: absolute;
                    border-radius: 90%;
                    filter: opacity(0.4);
                    background: deepskyblue;
                    transform-origin: 50% 48%;
                    animation: drift linear infinite;
                }
                .wave:nth-of-type(1) {
                    animation-duration: 5s;
                }
                .wave:nth-of-type(2) {
                    animation-duration: 7s;
                }
                .wave:nth-of-type(3) {
                    animation-duration: 9s;
                    background-color: orangered;
                    filter: opacity(0.1);
                }
                @keyframes drift {
                    from {
                        transform: rotate(360deg);
                    }
                }
            }
        }
        .close-button {
            left: 50%;
            width: 70rpx;
            height: 70rpx;
            bottom: -100rpx;
            display: flex;
            font-weight: bold;
            position: absolute;
            border-radius: 100%;
            align-items: center;
            background-color: #fff;
            justify-content: center;
            transform: translateX(-50%);
        }
    }
}
</style>
